<template>
  <div class="register_container">
    <h1 align="center">Welcome to Fitness</h1>
    <div class="register_box">
      <el-form :model="ruleform" status-icon :rules="rules" ref="ruleform" label-width="0px" class="demo-ruleform">
        <h2 align="center">登录</h2>
        <br />
        <el-form-item label="" prop="name">
          <!-- 用户名 -->
          <el-input type="text" prefix-icon="el-icon-user" v-model="ruleform.name" autocomplete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="" prop="pass">
          <!-- 密码 -->
          <el-input  prefix-icon="el-icon-lock" type="password" v-model="ruleform.pass" autocomplete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item class="register_btn">
          <el-button type="primary" @click="submitForm('ruleform')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  
</template>

<script>
  // import login from '../../api/user.js'
  // import store from '../../store/index.js'
  export default {
    data() {
      // 密码验证规则
      var validatePass = (rule, value, callback) => {
        var reg = /^[a-zA-Z0-9_]{6,18}$/;
        if (value === '') {
          callback(new Error('请输入密码'));
        }else if(!reg.test(value)){
          callback(new Error('密码位数不能少于6位多于18位'));
        }else {
          callback();
        }
      };
      // 用户名验证规则
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      // 邮箱验证规则
      return {
        // 绑定的数据
        ruleform: {
          name: '',
          pass: '',
        },
        // 绑定prop的各种规则
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          name: [
            { validator: validateName,trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        var requestData = {
          username:this.ruleform.name,
          password:this.ruleform.pass
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.dispatch('Login',requestData  
              ).then(response => {
                var {status,data} = response
                console.log(data)
                if (status == 200){
                this.$router.push({
                    path: '/',
                })
              }
            }).catch(
               err => {
                 alert("用户认证失败！")
                 console.log("xxxx")
                 console.log(err)
               }
            )
          } else {
            console.log('登录失败，看看控制台吧！');
            return false;
          }
        })
      }
    }
  }
</script>

<style type="text/css">
  h1 {
      font-size: 45px;
      font-weight: 500;
      letter-spacing: 4px;
      margin: 60px 0;
      color: #FFFFFF;
      align: center;
  }
  h2 {
    color: #FFFFFF;
    align: center;
  }
  .register_container {
    background-image: url("../../assets/images/login/b2.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .register_box {
    width: 30%;
    height: 35%;
    /* border-radius: 3px; */
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -60%);
    padding: 40px;
    background-color: rgba(10, 10, 10, 0.25);
    border: 2px ridge rgba(238, 238, 238, 0.13);
    border-radius: 5px;
    -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    border-bottom: none;
    border-bottom-left-radius: initial;
    border-bottom-right-radius: initial;
  }
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -62%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
  .demo-ruleform {
    position: absolute;
    bottom: 0;
    width: 80%;
    padding: 0 ,20px;
    box-sizing: border-box;
  }
  .register_btn {
    display: flex;
    justify-content: flex-end;
  }
</style>